<template>
  <div>
    <el-select
      ref="chatSelect"
      filterable
      remote
      clearable
      :value="value"
      placeholder="请输入关键字后选择"
      :style="{ width: `${width}%` }"
      :remote-method="remoteMethod"
      @clear="onClear"
      @change="onChange"
      size="mini"
    >
      <el-option v-for="item in dataSource" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

<script>
import { map } from 'lodash-es'
import { mapActions } from 'vuex'

const defaultPagination = {
  pageNo: 1,
  pageSize: 10,
}

export default {
  name: 'rolling-select',

  model: {
    prop: 'value',
    event: 'change',
  },

  props: {
    value: [Number, String, Array],

    width: {
      type: Number,
      default: 180,
    },
  },

  mounted() {
    // 滚动加载业务逻辑
    const handleScroll = this.$refs.chatSelect.$refs.scrollbar.handleScroll
    this.$refs.chatSelect.$refs.scrollbar.handleScroll = () => {
      handleScroll()
      if (
        this.$refs.chatSelect.$refs.scrollbar.$refs.resize.clientHeight -
        this.$refs.chatSelect.$refs.scrollbar.moveY * 2.8 <
        300
      ) {
        if (this.total > this.dataSource.length && !this.loading) {
          this.pagination.pageNo++
          this.loading = true
          this.fetchRemoteData()
        }
      }
    }
  },

  data() {
    return {
      loading: false,

      dataSource: [],

      searchValue: undefined,

      total: 0,

      pagination: { ...defaultPagination },
    }
  },

  methods: {
    ...mapActions('projectList', ['qryHospitalList']),

    /**
     * 重置筛选&分页条件
     */
    onReset() {
      this.pagination = { ...defaultPagination }
      this.dataSource = []
    },

    /**
     * 搜索回调事件
     * @param query 查询字符串
     * @return {Promise<void>}
     */
    async remoteMethod(query) {
      this.onReset()
      this.searchValue = query
      this.fetchRemoteData()
    },

    fetchRemoteData() {
      const data = {
        ...this.pagination,
        name: this.searchValue,
        isCode: 0, // 查询医院编码不是空的数据
      }
      this.qryHospitalList({ data }).then(res => {
        const { list, total } = this.transformReqData(res.data)
        this.dataSource = [...this.dataSource, ...list]
        this.total = total
        this.loading = false
      })
    },

    // 处理源数据
    transformReqData(data) {
      const total = data.total
      const list = map(data.records || [], rItem => ({
        label:
          rItem.name +
          `${rItem.nameOne ? '/' + rItem.nameOne : ''}${rItem.nameTwo ? '/' + rItem.nameTwo : ''}${
            rItem.nameThree ? '/' + rItem.nameThree : ''
          }`,
        value: rItem.onlyId,
        code: rItem.code,
        provinceVO: rItem.provinceVO,
        cityVO: rItem.cityVO,
        areaVO: rItem.areaVO,
      }))
      return { total, list }
    },

    /**
     * 选择or删除事件
     * @param value 选中值
     * @return {undefined}
     */
    onChange(value) {
      let obj = {}
      this.dataSource.map((dItem, dIndex) => {
        if (dItem.value && value === dItem.value) {
          obj = dItem
        }
      })
      this.$emit('change', obj)
    },

    onClear() {
      // this.value = ''
      this.$emit('change', {})
      this.onReset()
      this.fetchRemoteData()
    },
  },
}
</script>

<style lang="scss">
.user-select {
  width: 100%;
}
</style>
